<template>
  <!-- <div>这是详情页</div> -->
  <!-- <div>{{ id }}</div> -->

  <div v-if="loading">loading...</div>
  <div v-else>
    <p>{{ detailInfo.proname }}</p>
    <img :src="detailInfo.img1" alt="" />

    <button @click="guess">猜你喜欢</button>
  </div>
</template>

<script>
// import axios from "axios";

import { getDetailApi } from "@/api";
// import NProgress from "nprogress";
export default {
  data() {
    return {
      loading: true,
      detailInfo: {},
    };
  },
  created() {
    this.getDetailData();
  },

  methods: {
    async getDetailData(id) {
      // axios
      //   .get(
      //     "http://121.89.205.189:3000/api/pro/detail/" +
      //       (id || this.$route.params.id)
      //   )
      //   .then((res) => {
      //     this.detailInfo = res.data.data;
      //     this.loading = false;
      //   });

      const res = await getDetailApi(id || this.$route.params.id);
      this.detailInfo = res.data;
      this.loading = false;
    },
    guess() {
      this.$router.push("/detail/pro_edc3dcb4-0938-464c-8f82-767de037fe0a");
    },
  },

  // 组件内守卫
  // 是路由提供的三个生命周期

  // beforeRouteEnter可以用来先请求再跳转
  // beforeRouteEnter(to, from, next) {
  // 在渲染该组件的对应路由被验证前调用
  // 不能获取组件实例 `this` ！
  // 因为当守卫执行时，组件实例还没被创建！
  // console.log("beforeRouteEnter", this);

  // NProgress.start();
  // axios
  //   .get("http://121.89.205.189:3000/api/pro/detail/" + to.params.id)
  //   .then((res) => {
  //     NProgress.done();
  //     console.log(res, 1111);
  //     // next里面可以接受一个函数，这个函数会在next跳转的时候执行
  //     // vm相当于是组件的this
  //     next((vm) => {
  //       vm.detailInfo = res.data.data;
  //       // vm.loading = false;
  //     });
  //   });
  // },

  // 和watch:$route的效果完全一样
  // 用于做猜你喜欢的(详情页跳详情页)
  beforeRouteUpdate(to, from) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
    // 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
    console.log("beforeRouteUpdate");
    this.getDetailData(to.params.id);
  },

  beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
    console.log("beforeRouteLeave");
    const answer = window.confirm(
      "Do you really want to leave? you have unsaved changes!"
    );
    if (!answer) return false;
  },
};
</script>
